<template>

  <div class="aside-div">
    <el-menu :default-active="this.$store.state.menus.editableTabsValue" class="el-menu-vertical-demo"
             @open="handleOpen" @close="handleClose" :router="true" :collapse="isCollapse">
      <el-menu-item index="/Index" @click="selectMenu({name: 'Index', title: '首页'})">
        <template slot="title">
          <i class="el-icon-hot-water"></i>
          <span slot="title">首页</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/collect" @click="selectMenu({name: 'collect', title: '收藏管理'})">
        <template slot="title">
          <i class="el-icon-star-on"></i>
          <span slot="title">收藏管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/Banner/main" @click="selectMenu({name: 'BannerMain', title: '轮播图管理'})">
        <template slot="title">
          <i class="el-icon-video-camera-solid"></i>
          <span slot="title">轮播图管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/member" @click="selectMenu({name: 'member', title: '用户管理'})">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/Comment" @click="selectMenu({name: 'Comment', title: '评论管理'})">
        <template slot="title">
          <i class="el-icon-s-comment"></i>
          <span slot="title">评论管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/Song/info" @click="selectMenu({name: 'SongInfo', title: '歌曲管理'})">
        <template slot="title">
          <i class="el-icon-video-play"></i>
          <span slot="title">歌曲管理</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/Singer" @click="selectMenu({name: 'Singer', title: '歌手管理'})">
        <template slot="title">
          <i class="el-icon-microphone"></i>
          <span slot="title">歌手管理</span>
        </template>
      </el-menu-item>

      <el-submenu index="/sys">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/sys/user">用户管理</el-menu-item>
          <el-menu-item index="/sys/role">角色管理</el-menu-item>
          <el-menu-item index="/sys/menu">菜单管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <!--      动态设置左侧导航  这里有个问题就是对于左侧的导航菜单而言，有的有两层，有的有一层，使用的导航标签是不同的。即el-submenu（多层）和el-menu-item（一层）-->
      <div v-for="menu in menuList">
        <el-submenu :index="menu.name" :key="menu.name" v-if="menu.children.length > 0">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.title}}</span>
          </template>
          <el-menu-item v-for="item in menu.children" :index="item.path" @click="selectMenu({name: item.path, title: item.title})">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <el-menu-item v-else :index="menu.path" @click="selectMenu({name: menu.path, title: menu.title})">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.title}}</span>
          </template>
        </el-menu-item>
      </div>

    </el-menu>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isCollapse: false, // 展开关闭
    }
  },
  computed: {
    menuList: {
      get() {
        console.log(this.$store.state.menus.menuList);
        return this.$store.state.menus.menuList
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    // 标签页显示
    selectMenu(tabItem) {
      console.log("添加标签页：" + JSON.stringify(tabItem));
      this.$store.commit('addTab', tabItem);
    }
  }
};

</script>

<style>
.el-menu-vertical-demo {
  height: 100%;
}

</style>
